<template>
  <div style="position: relative; width: 100%" data-app>

    <v-card :loading="loading" max-width="100%" style="margin: auto">
      <template slot="progress">
        <v-progress-linear
          color="#f60"
          height="5"
          indeterminate
        ></v-progress-linear>
      </template>

      <v-img
        :src="part.img"
        @load="onLoadImage"
      />

      <v-card-title>{{ part.part_name }}</v-card-title>

      <v-card-text>
        <div>{{ part.name }}</div>
      </v-card-text>

      <v-card-text>
        <v-chip-group>
          <v-chip>价格：¥{{ part.price }}</v-chip>
          <v-dialog v-model="dialog" width="500">
            <template #activator="{ on, attrs }">
              <v-btn color="red lighten-2" dark v-bind="attrs" v-on="on">
                购买链接
              </v-btn>
            </template>


              <v-card>
                <v-card-title class="headline grey lighten-2">
                  👇「复制」链接后「粘贴」到浏览器打开
                </v-card-title>

                <Adsense
                  data-ad-client="ca-pub-6243451787655828"
                  data-ad-slot="9670271968"
                >
                </Adsense>

                <v-divider></v-divider>

                <v-card-actions>
                  <v-spacer></v-spacer>

                  <v-btn
                    v-clipboard:copy="part.url"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    type="button"
                    @click="dialog = false"
                  >
                    复制链接
                  </v-btn>
                </v-card-actions>
              </v-card>

          </v-dialog>
        </v-chip-group>
      </v-card-text>

      <v-divider class="mx-4"></v-divider>

      <v-card-title>配置清单</v-card-title>
    </v-card>


      <InFeedAdsense
        data-ad-layout-key="-6t+ed+2i-1n-4w"
        data-ad-client="ca-pub-6243451787655828"
        data-ad-slot="2721720230"
      >
      </InFeedAdsense>

      <van-list
        v-if="showList"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <a
          v-for="item in list"
          :key="item.ID"
          :href="'https://www.17fpv.com/' + item.ID + '.html'"
        >
          <v-card :title="item.post_title" style="margin-bottom: 3px" outlined>
            <v-img
              :src="item.thumbnail"
              aspect-ratio="1.7"
              lazy-src="/loading.gif"
            ></v-img>
          </v-card>
        </a>
      </van-list>

  </div>
</template>

<script>
export default {
  name: 'PartsDetail',
  async asyncData(context) {
    var id = context.query.id

    if (!id) {
      return {}
    }

    var part = []

    await context.$axios
      .get('https://www.17fpv.com/wp-json/jiangqie/v1/part/detail?id=' + id)
      .then((response) => {
        part = response.data.data.data
      })
      .catch(function (error) {
        // 请求失败处理
        console.log(error)
      })

    return {
      part: part,
      title: part.name,
    }
  },
  data() {
    return {
      part: [],
      list: [],
      loading: false,
      finished: false,

      page: 0,

      dialog: false,
      title: '',

      // show_skeleton_loader: true,//股价屏是否加载
      showList: false,
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: this.title,
          name: this.title,
          content: this.title,
        },
        {
          itemprop: 'title',
          name: 'title',
          content: this.title,
        },
        {
          itemprop: 'description',
          name: 'description',
          content: this.title,
        },
        {
          itemprop: 'url',
          name: 'url',
          content: 'http://app.17fpv.com/parts-detail?id=' + this.part.id,
        },
        {
          itemprop: 'image',
          name: 'image',
          content: this.part.img,
        },
      ],
    }
  },

  methods: {
    onLoad() {
      this.loading = true
      let that = this

      this.$axios
        .get(
          'https://www.17fpv.com/wp-json/jiangqie/v1/part/get_more_fpv?id=' +
            that.part.id +
            '&page=' +
            that.page
        )
        .then((response) => {
          that.list = that.list.concat(response.data.data.data)
          that.loading = false
          that.page += 1

          if (response.data.data.data.length < 6) {
            that.finished = true
          }
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },

    onCopy: function () {
      this.$toast('链接已复制')
    },
    onError: function () {
      alert('Failed to copy texts')
    },

    onLoadImage() {


      setTimeout(() => {

         this.showList = true
         // this.show_skeleton_loader = false
       }, 2000);
    }
  },
}
</script>

<style scoped>
p {
  color: red;
}
</style>
